<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/css/swiper.min.css">
    <link rel="stylesheet" href="../css/home.css">
</head>
<!--    备注BUG
        1.最下方字体不兼容大屏幕,字体溢出 (以解决)
        2.登录框 中的忘记密码,checkbox 屏幕缩小时位置发生改变 (checkbox未解决)
        3.课程计划 课程名最多显示3个字(已解决,后续注意自从左至右,不可以居中)
        4.登录框 中的 账号密码没有图标 (已解决)
        5.登录界面最好更换写法 (暂没有更好的写法)
        6.轮播图后台管理 菜单栏使用icon 字体不使用图片(已解决)
        7.后台管理不兼容谷歌,右侧导航栏缩小时会到下方 (已解决)
        8.登录css样式未加备注 (已解决)
        9.登录js有些不清楚 (已解决)
        10.类名修改(已解决)

-->
<body>
<!-- 导航栏 -->
<div class="nav">
    <div class="left">
        <img src="../images/logo.png" alt="">
    </div>
    <div class="right">
        <a href="" id="home">网站首页</a>
        <a href="#plan">课程计划</a>
        <a href="#company">公司简介</a>
        <a href="#team">团队介绍</a>
        <a href="">联系我们</a>

        <!-- 登录尝试 -->
        <button onclick="document.getElementById('modal').style.display='block'" id="login">登录</button>

        <div id="modal" class="modal">

            <form class="modal-content animate">

                <div class="container">
                    <span>登&nbsp;&nbsp;&nbsp;录</span>
                    <img src="../images/user.jpg" alt="" id="user">
                    <input type="text" placeholder="会员/邮箱/手机号" name="uname" required>
                    <img src="../images/password.jpg" alt="" id="password">
                    <input type="password" placeholder="密码" name="psw" required>
                    <button type="button" class="submit">登陆</button>
                    <div class="check">
                        <input type="checkbox"  value="" id="checkbox1">
                        <label for="checkbox1">记住账号</label>
                        <a href="#">忘记密码</a>
                    </div>

                </div>
            </form>
        </div>
    </div>
</div>

<!-- 轮播图 -->
<script src="../lib/js/swiper.min.js"></script>
<div class="swiper swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="../images/top1.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="../images/top2.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="../images/top3.png" alt="">
        </div>
        <div class="swiper-slide">
            <img src="../images/top4.jpg" alt="">
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

</div>

<!-- 免费课程 -->
<div class="course">
    <div class="herderCenter">
        <img src="../images/bit.png" alt="">
        <span>免费课程</span>
    </div>
    <div class="curr">
        <div class="out" id="curr_out">
            <img src="../images/13.png">
            <div class="zxs" id="zxs1">
                <h2>视觉设计</h2>
            </div>
        </div>
        <div class="out">
            <img src="../images/05.png">
            <div class="zxs">
                <h2>视觉设计</h2>
            </div>
        </div>
        <div class="out">
            <img src="../images/11.png">
            <div class="zxs">
                <h2>视觉设计</h2>
            </div>
        </div>
        <div class="out">
            <img src="../images/12.png">
            <div class="zxs">
                <h2>视觉设计</h2>
            </div>
        </div>
    </div>
    <div class="free_class">
        <div class="free_class_name">
            <span>网页设计</span>
            <p>网页设计是根据企业希望向浏览者传递
                的信息（包括产品、服务、理念、文
                化），进行网站功能策划，然后进行的
                页面设计美化工作。</p>
        </div>
        <div class="free_class_name" id="name_1st">
            <span>后台运维</span>
            <p>运维，这里指互联网运维，通常属于技
                术部门，与研发、测试、系统管理同为
                互联网产品技术支撑的4大部门，这个划
                分在国内大小公司间都会多少有一些不同。</p>
        </div>
        <div class="free_class_name" id="name_2nd">
            <span>人力资源</span>
            <p>人力资源指在一个国家或地区中，未到
                劳动年龄和超过劳动年龄但具有劳动能
                力的人口之和。一个国家或地区的总人
                口中减去丧失劳动能力的人口之后的人口。</p>
        </div>
        <div class="free_class_name" id="name_3rd">
            <span>网页设计</span>
            <p>软件开发是根据用户要求建造出软件系
                统或者系统中的软件部分的过程。软件
                开发是一项包括需求捕捉、需求分析、
                设计、实现和测试的系统工程。</p>
        </div>
    </div>
</div>

<!-- 课程计划 -->
<div class="plan" id="plan">
    <div class="herderCenter">
        <img src="../images/bit.png" alt="">
        <span>课程计划</span>
    </div>
    <div class="column">
        <div class="left fl">
            <div class="column_class change" id="chinese">
                <span>语文</span>
            </div>
            <div class="column_class change" id="maths">
                <span>数学</span>
            </div>
            <div class="column_class change" id="english">
                <span>英语</span>
            </div>
            <div class="column_class change" id="chem">
                <span>化学</span>
            </div>
        </div>

        <div class="right">
            <div class="notice">
                <div class="img">
                    <div class="notice_time_zero">时间</div>
                    <div class="notice_time first">2018-03-08</div>
                    <div class="notice_time second">2018-03-09</div>
                    <div class="notice_time third">2018-03-10</div>
                    <div class="notice_time forth">2018-03-11</div>
                    <div class="notice_content_zero">内容</div>
                    <div class="notice_content first">第一讲: 谈老舍</div>
                    <div class="notice_content second">第二讲: 百草园 </div>
                    <div class="notice_content third">第三讲: 鸿门宴</div>
                    <div class="notice_content forth">第四讲: 沁园春</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 公司简介 -->
<div class="company" id="company">
    <div class="herderCenter">
        <img src="../images/bit.png" alt="">
        <span>公司简介</span>
    </div>
    <div class="about">
        <img src="../images/06.png" alt="">
        <div class="about_content">
            <p>自2007年进入中国市场以来，备受孩子和家长的青睐，经过长达八年<br>
                的努力，我们为中国不同年龄段的孩子创造与国际先进标准同步的教<br>
                育体系。全球丰富的教育行业经验和优质的产品资源，采用互动多媒<br>
                体为教学手段，旨在为3-18岁的孩子提供纯正美式幼儿英语、儿童英<br>
                语、少儿英语。在全浸入式英语环境中，激发孩子的英语学习兴趣，<br>
                英语如母语般运用自如。</p>
        </div>
    </div>
</div>
<!-- 团队介绍 -->
<div class="team" id="team">
    <div class="herderCenter">
        <img src="../images/bit.png" alt="">
        <span>团队介绍</span>
    </div>
    <div class="news">
        <div class="news_content" id="news_1st">
            <img src="../images/07.png" alt="">
            <p class="news_name">Caspar Sawrey</p>
            <p>网页设计是根据企业希望向浏览者传递
                的信息（包括产品、服务、理念、文
                化），进行网站功能策划，然后进行的
                页面设计美化工作。</p>
        </div>
        <div class="news_content" id="news_2nd">
            <img src="../images/08.png" alt="">
            <p class="news_name">Yogarasa Gandhi</p>
            <p>运维，这里指互联网运维，通常属于技
                术部门，与研发、测试、系统管理同为
                互联网产品技术支撑的4大部门，这个划
                分在国内大小公司间都会多少有一些不同。</p>
        </div>
        <div class="news_content" id="news_3rd">
            <img src="../images/09.png" alt="">
            <p class="news_name">Erin Green</p>
            <p>人力资源指在一个国家或地区中，未到
                劳动年龄和超过劳动年龄但具有劳动能
                力的人口之和。一个国家或地区的总人
                口中减去丧失劳动能力的人口之后的人口。</p>
        </div>
        <div class="news_content" id="news_4th">
            <img src="../images/10.png" alt="">
            <p class="news_name">Tatiana Gagelman</p>
            <p>软件开发是根据用户要求建造出软件系
                统或者系统中的软件部分的过程。软件
                开发是一项包括需求捕捉、需求分析、
                设计、实现和测试的系统工程。</p>
        </div>
    </div>
</div>

<!-- 结尾 -->
<div class="footer">
    <div class="footer_log">
        <img src="../images/group.png" alt="">
    </div>
    <div class="footer_content">
        <a href="#">网站首页</a>
        <a href="#plan">课程计划</a>
        <a href="#company">公司简介</a>
        <a href="#team">团队介绍</a>
        <a href="">联系我们</a>
    </div>
    <div class="footer_copyright">
        <span>@2019 博学识堂 版权所有</span>
    </div>
</div>
</body>
</html>
<script src="../lib/js/jquery.min.js"></script>
<script src="../lib/js/hotcss.js"></script>
<script src="../js/home.js"></script>



























